<template lang="pug">
  LayoutMain
    .monitor-form(slot="form")
      ul
        li 分区：
          select(
            v-model="areaId"
            type='selet')
            option(
              v-for="(item,index) in areaList"
              v-text="item.area"
              :value="item.id")
        li
          span 时间：
          el-date-picker.el-date-editor-xxs(
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:00:00")
        li.time-length
          span 间隔：
          select(v-model="interval")
            option(
              v-for="(item,index) in intervalList"
              :key="'interval'+index"
              :value="item.value") {{item.label}}
    .monitor-chart(slot="chart")
      .waterio
        ChartWaterio(
          ref="chartWaterIO"
          :areaId="areaId"
          :timeRange="formatTimeRange"
          :interval="interval")
      .indicators
        ChartIndicators(
          ref="chartIndicators"
          :areaId="areaId"
          :timeRange="formatTimeRange")
    .monitor-table(slot="datatable")
      TableNavbar(
        ref='tableNavbar'
        :areaId="areaId"
        :timeRange="formatTimeRange")
</template>

<script>
/**
 * @name AreaMesg 分区信息统计
 * @author wangrf
 * @description 各分区详细信息显示
 */
import LayoutMain from '@/containers/Common/LayoutMain'
import ChartIndicators from './ChartIndicators'
import ChartWaterio from './ChartWaterio'
import TableNavbar from '../../ZonalStatistic/TableNavbar'
export default {
  name: 'AreaMesg',
  components: {
    LayoutMain,
    ChartIndicators,
    ChartWaterio,
    TableNavbar
  },
  props: {
    areaId: Number
  },
  data () {
    return {
      areaList: [],
      interval: '',
      intervalList: [],
      // FIXME: 可以用moment解决 时间定时不准确
      timeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      formatTimeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      pickerOptions: { // 时间日期选择器的配置项
        shortcuts: [{
          text: '最近一周',
          onClick: (picker) => {
            const end = this.$moment().format('x')
            const start = this.$moment().subtract(7, 'days').format('x')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick: (picker) => {
            const end = this.$moment().format('x')
            const start = this.$moment().subtract(1, 'months').format('x')
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick: (picker) => {
            const end = this.$moment().format('x')
            const start = this.$moment().subtract(3, 'months').format('x')
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    areaId (val) {
      if (this.areaId) {
        this.refreshComponents()
      }
    },
    timeRange () {
      if (this.areaId) {
        this.refreshComponents()
      }
    },
    interval () {
      if (this.areaId) {
        this.$nextTick(() => {
          this.$refs.chartWaterIO.getData()
        })
      }
    }
  },
  methods: {
    // 请求页面数据
    refreshComponents () {
      this.getFormatTimeRange()
      this.$nextTick(() => {
        this.$refs.chartWaterIO.getData()
        this.$refs.chartIndicators.getData()
        this.$refs.tableNavbar.refreshTable()
      })
    },
    // TODO: 完成formatTimeRange、timeRange参数的确定
    // 调整时间范围
    getFormatTimeRange () {
      this.formatTimeRange = this.timeRange.map(item => this.changeTimeFormat(item))
      if (this.formatTimeRange[1].getTime() - this.formatTimeRange[0].getTime() < 60 * 60 * 1000) {
        this.formatTimeRange[1] = new Date(this.formatTimeRange[1].getTime() + 60 * 60 * 1000 - 1)
      }
    },
    // 将时间格式化最小单位为小时
    changeTimeFormat (datetime) {
      var time = new Date(datetime)
      time.setSeconds(0)
      time.setMinutes(0)
      return time
    },
    // TODO: 完成areaList参数的确定
    // 获取地区的列表
    getAreaRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=pressureAreas'
      }).then(res => {
        this.areaList = res.pressureAreas.map(item => {
          return {
            area: item.label,
            id: item.value
          }
        })
      })
    },
    // TODO: 完成intervalList、interval参数的确定
    getDateTypeRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=dateType'
      }).then(res => {
        this.intervalList = res.dateType
        this.interval = res.dateType[3].value
      })
    }
  },
  mounted () {
    this.getAreaRelation()
    this.getDateTypeRelation()
  }
}
</script>

<style lang="sass" scoped>
/deep/.el-range-editor
  .el-range-input
    max-width: 160px
.monitor-form
  display: flex
  align-items: center
  width: 100%
  height: 100%
  ul
    display: flex
    padding-left: 20px
    li
      margin-right: 20px
      select
        width: 120px
        height: 40px
        border: 1px solid #dfdfdf
        border-radius: 5px
        font-size: 15px
        padding-left: 10px
        color: #606266
.monitor-chart
  height: 100%
  display: flex
  overflow: hidden
  background-color: #fafafa
  .waterio,.indicators
    float: left
    overflow: hidden
  .waterio
    flex: 76
    height: 100%
    margin-right: 8px
  .indicators
    flex: 24
    min-width: 260px
.monitor-table
  width: 100%
  height: 100%
  flex: 1
  display: flex
</style>
